<template>
  <div class="main_box">
    <el-row class="header-row">
      <el-col>
        <div class="search_wrap">
          <el-form :inline="true" :model="searchForm" ref="searchForm">
            <el-form-item prop="searchValue">
              <el-input v-model="searchForm.searchValue" :clearable="true" placeholder="书名/作者/出版社"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button icon="el-icon-search" type="primary" @click="onSearch">查询</el-button>
              <el-button icon="el-icon-refresh-left" @click="resetForm">重置</el-button>
            </el-form-item>
          </el-form>
        </div>
      </el-col>
      <el-col>
        <div class="opration_wrap">
          <el-tooltip content="刷新" placement="top">
            <el-button circle icon="el-icon-refresh-right" @click="reload" size="mini"></el-button>
          </el-tooltip>
          <el-button type="primary" plain icon="el-icon-position" v-has="permissionSendEmail" @click="handleSendEmails()" size="mini"> 批量发送邮件 </el-button>
        </div>
      </el-col>
    </el-row>
    <el-row ref="tableRow">
      <el-table :data="tableList" :fit="true" @selection-change="changeSelect">
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column type="index" label="序号" width="50"></el-table-column>
        <el-table-column show-overflow-tooltip prop="bookName" label="书名" width="180"></el-table-column>
        <el-table-column show-overflow-tooltip prop="author" label="作者" width="100"></el-table-column>
        <el-table-column prop="press" label="出版社" width="180"></el-table-column>
        <el-table-column prop="bookCode" label="ISBN" width="180"></el-table-column>
        <el-table-column label="问题类型" width="90">
          <template slot-scope="scope">
            <span>
              <el-tag size="mini" type="danger">{{ formatType(scope.row.questionType) }}</el-tag>
            </span>
          </template>
        </el-table-column>
        <el-table-column show-overflow-tooltip prop="describes" label="问题描叙"></el-table-column>
        <el-table-column label="处理状态" width="80" align="center">
          <template slot-scope="scope">
            <span>
              <el-tag size="mini">{{ formatState(scope.row.questionState) }}</el-tag>
            </span>
          </template>
        </el-table-column>
        <el-table-column prop="createDate" label="创建时间" width="140"></el-table-column>
        <el-table-column label="操作" width="260" align="center">
          <template slot-scope="scope">
            <el-row>
              <!-- <el-dropdown trigger="click" size="small">
                <el-button type="primary"><i class="fa fa-list-ul"></i>更多</el-button>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item v-has="permissionCheck" @click.native="handleClickDetail(scope.row)">查 看</el-dropdown-item>
                  <el-dropdown-item v-has="permissionExamine" @click.native="handleClickEdit(scope.row)">编 辑</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown> -->
              <el-button v-has="permissionCheck" @click="handleClickDetail(scope.row)" size="mini">查 看</el-button>
              <el-button v-has="permissionExamine" @click="handleClickDisable(scope.row)" size="mini">驳 回</el-button>
              <el-button v-has="permissionDelete" @click="handleClickDelete(scope.row)" size="mini">删 除</el-button>
            </el-row>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page.pageNo"
        :page-sizes="[20, 50, 100]"
        :page-size="page.pageSize"
        layout="total, sizes, jumper, next, pager, prev"
        :total="page.pageTotal"
      ></el-pagination>
    </el-row>
  </div>
</template>
<script>
import * as message from '@/constants/message';
import { FORMAT_DATE_YYYY_MM_DD } from '@/constants/constants';
import ProvinceCity from '@/components/ProvinceCity';
import FeedApi from '@/api/question/feedback';
export default {
  name: 'UserManagement',
  inject: ['reload'], //注入局部刷新
  data() {
    return {
      searchForm: {},
      tableList: [],
      // tableList: [
      //     {
      //       bookId: 1,
      //       bookName:'三毛流浪记',
      //       author: '三毛',
      //       press: '三毛出版社',
      //       bookCode: '20220602-ABCD-TT',
      //       questionType: 1,    //1.美化国外 2.编排不当 3.有违公序良俗 4.性暗示 5.暴力倾向 6.不良引诱 7.画风怪异 8.涉毒宣传 9.恶意丑化 10.辱国 11.常识错误 12.优质内容缺失
      //       describes: '这篇小故事里涉嫌家暴，让我觉得这是在引导从小培养孩子一夫多妻，家暴、暴力思想，这是要从小就把他们毁掉啊。',
      //       questionState: 1,   // 1. 待审核 5. 审核通过（已发邮件） 10.审核不通过  15.取消反馈  20.反馈成功
      //       createDate: '2022.6.2 15:51',
      //     }
      // ],
      selectIds: [],

      page: {
        pageNo: 1,
        pageTotal: 0,
        pageSize: 20,
      },
      permissionCheck: 'SYSTEM_MANAGER_QUESTION_LIST_SEARCH',
      permissionDelete: 'SYSTEM_MANAGER_QUESTION_LIST_DELETE',
      permissionSendEmail: 'SYSTEM_MANAGER_QUESTION_LIST_BATCH_SEND_EMAIL',
      permissionExamine: 'SYSTEM_MANAGER_QUESTION_LIST_EXAMINE',
    };
  },
  components: {
    ProvinceCity,
  },
  created() {
    this.init();
    window.addEventListener('keydown', this.keyDown);
  },
  activated() {
    if (this.$route.meta.keepAlive) {
      this.listTable();
    }
  },
  destroyed() {
    window.removeEventListener('keydown', this.keyDown, false);
  },
  methods: {
    init() {
      this.listTable();
      this.getTableHeight();
    },
    keyDown(e) {
      //如果是回车则执行查询方法
      if (e.keyCode == 13) {
        this.onSearch();
      }
    },


    formatType(cellValue) {
      if (cellValue == 1) {
        return '美化国外';
      } else if (cellValue == 2) {
        return '编排不当';
      } else if (cellValue == 3) {
        return '有违公序良俗';
      } else if (cellValue == 4) {
        return '性暗示';
      } else if (cellValue == 5) {
        return '暴力倾向';
      } else if (cellValue == 6) {
        return '不良引诱';
      } else if (cellValue == 7) {
        return '画风怪异';
      } else if (cellValue == 8) {
        return '恶意丑化';
      } else if (cellValue == 9) {
        return '涉毒宣传';
      } else if (cellValue == 10) {
        return '辱国';
      } else if (cellValue == 11) {
        return '常识错误';
      } else if (cellValue == 12) {
        return '优质内容缺失';
      }
    },
    formatState(cellValue) {
      if (cellValue == 1) {
        return '待审核';
      } else if (cellValue == 5) {
        return '审核通过';
      } else if (cellValue == 10) {
        return '审核不通过';
      } else if (cellValue == 15) {
        return '取消反馈';
      } else if (cellValue == 20) {
        return '反馈成功';
      }
    },
    listTable() {
      let data = {
        pageNo: this.page.pageNo,
        pageSize: this.page.pageSize,
        search: this.searchForm.searchValue,
      };
      this.fetchData(data);
    },
    fetchData(data) {
      this.$emit('show-loading', true);
      FeedApi.listQuestionBook(data)
        .then((res) => {
          this.tableList = res.data.list;
          this.page.pageTotal = res.data.total;
          this.$emit('show-loading', false);
        })
        .catch((error) => {
          this.$emit('show-loading', false);
        });
    },

    /**
     * 查看当前数据详情
     * @param {*} row
     */
    handleClickDetail(row) {
      this.$router.push({
        path: '/question/questionDetail',
        query: { id: row.questionId },
      });
    },
    /**
     * 删除当前图文反馈数据
     * @param {*} row
     */
    handleClickDelete(row) {
      this.$confirm(message.MSG_CONFIRM_DELETE, message.TITLE_PROMPT, {}).then(() => {
        let data = {
          id: row.questionId,
          state: -1,
        };
        FeedApi.deleteQuestionBook(data).then((res) => {
          this.listTable();
          this.$Utils.notifySuccess();
        });
      });
    },

    /**
     *  驳回当前数据
     * @param {*} row
     */
    handleClickDisable(row) {
      const cond = {
        id: row.questionId,
        state: 10,
      };
      this.$confirm(message.MSG_SEND_EMAILS, message.TITLE_PROMPT, {}).then(() => {
        FeedApi.checkQuestionInfo(cond).then((res) => {
          this.$Utils.notifySuccess();
        });
      });
    },

    /**
     * 批量发送邮件
     */
    handleSendEmails() {
      const questionIds = this.selectIds;
      if (questionIds.length == 0) {
        this.$Utils.notifyError('至少选中一条反馈记录');
      } else {
        this.$confirm(message.MSG_SEND_EMAILS, message.TITLE_PROMPT, {}).then(() => {
          FeedApi.batchSendMail({ ids: questionIds }).then((res) => {
            this.$Utils.notifySuccess();
          });
        });
      }
    },

    // 分页以及表单基础内容
    handleSizeChange(size) {
      this.page.pageSize = size;
      this.listTable();
    },
    handleCurrentChange(val) {
      this.page.pageNo = val;
      this.listTable();
    },
    onSearch() {
      this.page.pageNo = 1;
      this.listTable();
    },
    changeSelect(val) {
      this.selectIds = [];
      for (let i = 0; i < val.length; i++) {
        this.selectIds.push(val[i].questionId);
      }
    },
    resetForm() {
      this.$refs.searchForm.resetFields();
      this.onSearch();
    },
  },
};
</script>
<style lang="scss" src="src/assets/css/views/content.scss" scope></style>
